<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>购物车 / 确认订单 - 610书窝</title>

  <!-- Favicon -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">

  <style>
    body {
      font-family: var(--ff-work-sans);
      background-color: var(--soft-pink-bg);
      /* Soft pink background */
      color: var(--dark-pink-text);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    main {
      flex-grow: 1;
      padding-block: var(--section-padding);
    }

    .cart-header {
      /* Consistent simple header */
      background-color: var(--white-1);
      padding: 15px 0;
      box-shadow: 0 2px 5px hsla(330, 40%, 45%, 0.05);
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 10;
      width: 100%;
    }

    .cart-header .container,
    .cart-container {
      max-width: 800px;
      /* Slightly wider for cart layout */
      margin-inline: auto;
      padding-inline: 15px;
    }

    .cart-header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cart-header .logo img {
      /* Style logo if needed */
    }

    .back-link {
      /* Reused from members.html */
      color: var(--secondary-pink);
      font-weight: var(--fw-500);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: var(--transition-1);
    }

    .back-link:hover {
      color: var(--primary-pink);
    }

    .section-title {
      /* Reused from members.html */
      text-align: center;
      margin-bottom: 40px;
      font-size: var(--fs-2);
      color: var(--dark-pink-text);
    }

    .section-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background-color: var(--secondary-pink);
      margin: 10px auto 0;
    }

    /* Cart Items Styling */
    .cart-items,
    .cart-summary,
    .payment-options {
      background-color: var(--white-1);
      padding: 25px;
      border-radius: var(--radius-card, 10px);
      margin-bottom: 30px;
      box-shadow: 0 5px 15px hsla(330, 40%, 75%, 0.1);
      border: 1px solid var(--primary-pink);
    }

    .cart-items h3,
    .cart-summary h3,
    .payment-options h3 {
      font-family: var(--ff-jost);
      font-size: var(--fs-4);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--soft-pink-bg);
      color: var(--dark-pink-text);
    }

    .cart-item-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .cart-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px dashed var(--soft-pink-bg);
      font-size: var(--fs-6);
    }

    .cart-item:last-child {
      border-bottom: none;
    }

    .item-name {
      color: var(--dark-pink-text);
    }

    .item-price {
      color: var(--secondary-pink);
      font-weight: var(--fw-500);
    }

    /* Cart Summary Styling */
    .summary-line {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: var(--fs-6);
    }

    .summary-line.total {
      font-size: var(--fs-4);
      font-weight: var(--fw-600);
      color: var(--dark-pink-text);
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--primary-pink);
    }

    .total .total-price {
      color: var(--secondary-pink);
    }

    /* Payment Options Styling */
    .payment-method {
      margin-bottom: 15px;
    }

    .payment-method label {
      display: flex;
      align-items: center;
      padding: 15px;
      border: 2px solid var(--soft-pink-bg);
      border-radius: var(--radius-card, 10px);
      cursor: pointer;
      transition: var(--transition-1);
      background-color: var(--white-2);
    }

    .payment-method input[type="radio"] {
      margin-right: 15px;
      accent-color: var(--secondary-pink);
      /* Style radio button color */
      transform: scale(1.2);
      /* Make radio slightly larger */
    }

    .payment-method label i {
      font-size: 2em;
      /* Larger icons */
      margin-right: 15px;
      width: 40px;
      /* Fixed width for alignment */
      text-align: center;
    }

    .payment-method .fa-weixin {
      color: #2DC100;
    }

    /* WeChat Green */
    .payment-method .fa-alipay {
      color: #1677FF;
    }

    /* Alipay Blue */

    .payment-method label:hover {
      border-color: var(--primary-pink);
      background-color: var(--soft-pink-bg);
    }

    .payment-method input[type="radio"]:checked+label {
      border-color: var(--secondary-pink);
      background-color: hsla(335, 85%, 75%, 0.1);
      /* Light pink selected background */
      box-shadow: 0 0 0 2px var(--secondary-pink);
    }

    /* Hide actual radio button visually, but keep it accessible */
    .payment-method input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .payment-label-content {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .payment-text {
      font-size: var(--fs-5);
      font-weight: var(--fw-500);
      color: var(--dark-pink-text);
    }


    .btn-confirm-payment {
      /* Reuse button styles */
      display: block;
      /* Make it block level */
      width: 100%;
      max-width: 300px;
      /* Limit width */
      margin: 30px auto 0;
      /* Center button */
      padding: 15px;
      background-color: var(--secondary-pink);
      color: var(--white-1);
      border: none;
      border-radius: var(--radius-pill, 30px);
      font-size: var(--fs-5);
      font-weight: var(--fw-600);
      cursor: pointer;
      text-align: center;
      transition: var(--transition-1);
    }

    .btn-confirm-payment:hover {
      background-color: var(--primary-pink);
      color: var(--dark-pink-text);
    }

    .cart-footer {
      /* Consistent minimal footer */
      background-color: var(--soft-pink-bg);
      padding-block: 20px;
      text-align: center;
      margin-top: auto;
      /* Push footer to the bottom */
      width: 100%;
    }

    .cart-footer .copyright {
      color: var(--medium-gray);
      font-size: var(--fs-6);
    }
  </style>
</head>

<body>

  <!-- Simple Header -->
  <header class="cart-header">
    <div class="container">
      <a href="./index.html" class="logo">
        <img src="./assets/images/logo.svg" width="138" height="28" alt="610书窝 Logo">
      </a>
      <a href="./index.html" class="back-link">
        <i class="fas fa-arrow-left"></i>
        <span>返回首页</span>
      </a>
    </div>
  </header>

  <main>
    <div class="cart-container">
      <h2 class="section-title">确认订单</h2>

      <!-- Simulated Cart Items -->
      <div class="cart-items">
        <h3>购物车商品 (模拟)</h3>
        <ul class="cart-item-list">
          <li class="cart-item">
            <span class="item-name">《黑夜》</span>
            <span class="item-price">$80.00</span>
          </li>
          <li class="cart-item">
            <span class="item-name">《关于第一个夜晚》</span>
            <span class="item-price">$19.00</span>
          </li>
          <li class="cart-item">
            <span class="item-name">《精装书》</span>
            <span class="item-price">$55.00</span>
          </li>
        </ul>
      </div>

      <!-- Cart Summary -->
      <div class="cart-summary">
        <h3>订单总计</h3>
        <div class="summary-line">
          <span>商品小计:</span>
          <span>$154.00</span>
        </div>
        <div class="summary-line">
          <span>运费:</span>
          <span>$0.00</span> <!-- Assuming free shipping -->
        </div>
        <div class="summary-line total">
          <span>订单总额:</span>
          <span class="total-price">$154.00</span>
        </div>
      </div>


      <!-- Payment Options -->
      <div class="payment-options">
        <h3>选择支付方式</h3>
        <form action="#"> <!-- No actual submission -->
          <div class="payment-method">
            <input type="radio" id="wechatpay" name="payment_method" value="wechat" checked>
            <label for="wechatpay">
              <div class="payment-label-content">
                <i class="fa-brands fa-weixin"></i>
                <span class="payment-text">微信支付</span>
              </div>
            </label>
          </div>
          <div class="payment-method">
            <input type="radio" id="alipay" name="payment_method" value="alipay">
            <label for="alipay">
              <div class="payment-label-content">
                <i class="fa-brands fa-alipay"></i>
                <span class="payment-text">支付宝</span>
              </div>
            </label>
          </div>
          <button type="submit" class="btn-confirm-payment">确认支付 $154.00</button>
        </form>
      </div>

    </div>
  </main>

  <!-- Minimal Footer -->
  <footer class="cart-footer">
    <p class="copyright">
      © 2025 610书窝 | 安全支付环境 (模拟)
    </p>
  </footer>

</body>

</html>